<template>
  <div id="jtopo">jtopo</div>
</template>
<script setup>
import { onMounted } from "vue";
import {
  Stage,
  Layer,
  Node,
  Tooltip,
  PopupMenu,
  VERSION,
  Link,
  Shape,
  CircleNode,
} from "./core";
import laptopPng from "@/components/topological/img/laptop.png";
console.log(VERSION, "VERSION");
const init = () => {
  // jtopo 提供若干极简的UI组件，满足一般情况
  // 组件耦合较低，方便修改扩展；也可以舍弃，完全使用自己的UI。
  const stage = new Stage("jtopo");
  const layer = new Layer("default");
  stage.addChild(layer);
  const animationSystem = stage.animationSystem;
  const effectSystem = stage.effectSystem;
  const styleSystem = stage.styleSystem;
  styleSystem.defClass('.shapeClass', {
    backgroundColor: '#fcd'
  });

  let node1 = new Node("node1", 0, 0, 64, 64);
  let node2 = new Node("node2", 80, 150, 64, 64);
  let node3 = new Node("node3", 150, 150, 64, 64);
  const shapeIns = Shape.polygon(5);
  // 将形状上下镜像
  shapeIns.scale(1, -1);
  node3.setShape(shapeIns);
  node3.addClass('.shapeClass');
  node1.setImage(laptopPng);
  node2.setImage(laptopPng);
  let linkIns = new Link("link", node1, node2, "rm", "nearest");
  // 用canvas的属性语法设置节点内绘制内容的属性: 线条、粗细、颜色
  linkIns.css({
    // 线条样式
    strokeStyle: "orange",
    // 线条粗细
    lineWidth: 2,
  });
  // 线上文本标签的样式
  let label = linkIns.getLabel();
  label.css({
    borderWidth: 1,
    borderColor: "gray",
    fontSize: "14px",
    fontFamily: "serif",
    borderRadius: [8, 0, 8, 0], // 四个角分别设置(有的浏览器低版本不支持)
    backgroundColor: "rgba(0,255,0,0.5)",
    padding: 5,
  });
  let beginArrow = new CircleNode();
  beginArrow.setRadius(12);
  beginArrow.css({
    fillStyle: "#F1F1F1",
    strokeStyle: "gray",
  });
  // 结束箭头
  let endArrow = new Node();
  endArrow.resizeTo(12, 12);
  endArrow.setShape(Shape.Arrow); // 箭头
  const huakuai = new Node('', 0, 0, 20, 10);
  huakuai.css({
    background: "green",
  });
  huakuai.setXYOnLink(0, 0);
  linkIns.addChild(huakuai);
  const rippling = effectSystem.rippling({ radius: 60 });
  // 获取‘特效’节点对象
  let ripplingNode = rippling.objects[0];
  huakuai.addChild(ripplingNode);
  huakuai.setZIndex(Math.max.call(null, beginArrow.zIndex, endArrow.zIndex, 0) + 0.1);
  huakuai.mouseEnabled = false;
  rippling.play();
  // n在5000毫秒内，从0逐渐变为1
  animationSystem
    .anime({
      from: 0,
      to: 1,
      duration: 10000,
      times: 2,
      direction: "alternate",
      effect: "easeInOutQuad",
      update: function (n) {
        huakuai.setXYOnLink(0, n);
      },
    })
    .play()
    .then(() => {
      // 特效移除
      ripplingNode.remove();
    });

  endArrow.css({
    strokeStyle: linkIns.getStyle("strokeStyle"),
    lineWidth: linkIns.getStyle("lineWidth"),
  });
  linkIns.setBeginArrow(beginArrow).setEndArrow(endArrow);

  layer.addChild(node1);
  layer.addChild(node3);
  // 可以一次添加多个
  layer.addChilds([node2, linkIns]);

  // 鼠标指向小提示
  let tooltip = new Tooltip(stage);
  tooltip.setHtml("小提示:右击弹出菜单");

  // 鼠标在节点上移动时显示
  node1.on("mousemove", function (event) {
    let is = stage.inputSystem;
    tooltip.showAt(is.x, is.y);
  });

  // 右键菜单
  let popupMenu = new PopupMenu(stage);
  popupMenu.setHtml(`
    <div class="header">编辑</div>
    <a>剪切</a>
    <a>复制</a>
    <a>粘贴</a>
    <a>删除</a>
    <hr></hr>
    <div class="header">功能</div>
    <a>上移一层</a>
    <a>移至顶部</a>
    <a>下移一层</a>
    <a>移至底部</a>
`);

  // 菜单选择事件处理
  popupMenu.on("select", function (event) {
    console.log(event, "event*-----");
    //event.item： 选中的菜单文本
    let item = event.item;
    node1.text = item;
  });

  // 鼠标按下时隐藏
  stage.inputSystem.on("mousedown", function () {
    popupMenu.hide();
  });

  // 右键松开时显示
  node1.on("mouseup", function () {
    let is = stage.inputSystem;
    // 取画布上的坐标x,y
    if (is.button == 2) {
      // right button
      popupMenu.showAt(is.x, is.y);
    }
  });
  stage.show();
};
onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped>
#jtopo {
  height: 100vh;
}
</style>
